<template>
    <div class="home-section">
        <div class="swiper-container">
            <div class="swiper-wrapper" id="swiper-wrapper">
                <div class="section landing"><landing-box /></div>
                <div class="section article"><acticle-box /></div>
            </div>
        </div>
        <div class="back-container" v-show="index === 1">
            <div class="el-backtop" @click="onBacktop">
                <i></i>
            </div>
        </div>
    </div>
</template>

<script>
import { getCurrentInstance, ref, onMounted, computed, onBeforeUnmount } from 'vue';
import LandingBox from './component/landing.vue';
import ActicleBox from './component/acticle.vue';

export default {
    name: 'Home',
    components: {
        LandingBox,
        ActicleBox
    },
    setup() {
        const { proxy } = getCurrentInstance();
        let id = ref('');
        let index = ref(0); // 当前第几项
        let duration = ref(500); // 滑动时长
        let translateY = ref(0); // 偏移量
        let itemHeight = ref(''); // 单个项目高度
        let isLock = ref(false); // 锁
        let startX, startY, direction;

        // 初始化
        onMounted(() => {
            let swiperWrapper = document.getElementById('swiper-wrapper');
            id.value = swiperWrapper;

            let swiperItemHeight = swiperWrapper.offsetHeight;
            itemHeight.value = swiperItemHeight;
            translateY.value = swiperItemHeight * index.value;

            _goIndex();

            window.addEventListener('wheel', onWheel, { passive: false });
            window.addEventListener('touchstart', onTouchstart, false);
            window.addEventListener('touchmove', onTouchmove);
        });
        // 离开页面销毁事件
        onBeforeUnmount(() => {
            window.removeEventListener('wheel', onWheel);
            window.removeEventListener('touchstart', onTouchstart);
            window.removeEventListener('touchmove', onTouchmove);
        });

        // 鼠标滑轮
        const onWheel = (e) => {
            let evt = e || window.event;
            evt.preventDefault();

            // 禁止滑动结束前再次点击
            if (isLock.value) {
                return;
            }

            if (evt.deltaY > 0) swiperNext();
            if (evt.deltaY < 0) swiperPrev();
        };
        // 获取开始坐标
        const onTouchstart = (e) => {
            startX = e.touches[0].pageX;
            startY = e.touches[0].pageY;
        };
        // 获取移动方向
        const onTouchmove = (e) => {
            const findParents = proxy.$utils.findParents(e.target, 'card-list');

            if (!findParents) return;

            let endX = e.changedTouches[0].pageX;
            let endY = e.changedTouches[0].pageY;
            direction = proxy.$utils.getSlideDirection(startX, startY, endX, endY);

            // 禁止滑动结束前再次点击
            if (isLock.value) {
                return;
            }
            switch (direction) {
            case 1:
                swiperNext();

                break;
            case 2:
                swiperPrev();
                break;
            }
        };
        // 查看上一个
        const swiperPrev = () => {
            if (index.value === 0) return;
            index.value = Number(index.value) - 1;
            _goIndex();
        };
        // 查看下一个
        const swiperNext = () => {
            if (index.value === 1) return;
            index.value = Number(index.value) + 1;
            _goIndex();
        };
        // 返回顶部
        const onBacktop = () => {
            index.value = 0;
            _goIndex();
        };
        // 执行动画
        const _goIndex = () => {
            let swiperDuration = duration.value;
            let swiperWidth = itemHeight.value;
            let beginTranslateY = translateY.value;
            // 根据传入的index就算出滑动结束位置
            let endTranslateY = -(swiperWidth * index.value);
            let swiperWrapper = id.value;

            isLock.value = true;

            // 调用动画，滑动中设置swiper-wrapper的偏移值
            proxy.$utils.animateTo(
                beginTranslateY,
                endTranslateY,
                swiperDuration,
                function (value) {
                    //滑动回调
                    swiperWrapper.style.transform = `translateY(${value}px)`;
                },
                function (value) {
                    //结束更新当前索引及偏移值
                    swiperWrapper.style.transform = `translateY(${value}px)`;
                    translateY.value = value;
                    isLock.value = false;
                }
            );
        };

        // 计算属性
        const isCollapse = computed(() => {
            return proxy.$store.state.collapse;
        });

        return { isCollapse, index, onBacktop, swiperPrev };
    }
};
</script>

<style lang="less">
.home-section,
.swiper-container,
.section {
    height: 100%;
}

.swiper-container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    list-style: none;
    padding: 0;
    display: flex;

    .swiper-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        transition-property: transform;
        box-sizing: content-box;
    }
}

.el-backtop {
    position: fixed;
    transition: all 0.3s;
    background-color: rgba(0, 0, 0, 0.6);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    bottom: 3%;
    right: 4%;
    cursor: pointer;
    z-index: 10;
    i {
        margin-bottom: 0.8rem;
        border: 0.6rem solid transparent;
        border-bottom: 0.6rem solid #fff;
    }
    &:hover {
        background-color: rgba(177, 189, 198, 0.8);
    }
}
</style>
